<template>
  <el-breadcrumb>
    <el-breadcrumb-item v-for="item in breadCrumbList" :key="item.title" :to="{ path: item.path }">{{item.title}}</el-breadcrumb-item>
    <!-- <el-breadcrumb-item>文章管理</el-breadcrumb-item>
    <el-breadcrumb-item>文章列表</el-breadcrumb-item> -->
  </el-breadcrumb>
</template>
<script lang="ts">
import { defineComponent, watch, reactive } from 'vue'
import {useRoute } from 'vue-router'
import getCruList from './breadCru'

export default defineComponent({
  name: "BreadCrumb",
  setup() {
    const route = useRoute();
    let breadCrumbList = reactive(getCruList(route))

    watch(route, (newVal)=> {
      // proxy定义的数据，使用这样的方式清空
      breadCrumbList.length = 0

      let newList = getCruList(newVal);
      newList.forEach(item=> {
        breadCrumbList.push(item)
      })

    })

    return {
      breadCrumbList
    }
  }
})
</script>

<style lang="scss" scoped>
</style>
